<template>
    <div style="overflow: hidden">
        客服中心座席不满意得分报表
        <el-table :data='tableData'>
            <el-table-column show-overflow-tooltip label='序号' prop='TARN_NUM'></el-table-column>
            <el-table-column show-overflow-tooltip label='交易日期' prop='TRAN_DATETIME'></el-table-column>
            <el-table-column show-overflow-tooltip label='币种' prop='CCY'></el-table-column>
            <el-table-column show-overflow-tooltip label='交易类型' prop='CR_DR_MAINT_IND'></el-table-column>
            <el-table-column show-overflow-tooltip label='交易金额'>
                <template slot-scope="props">
          <span :style="props.row.TRAN_AMT_FMT>0? 'color: #e50112': 'color:#0aa946'">
            {{props.row.TRAN_AMT_FMT}}
          </span>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label='余额' prop='BAL_FMT'></el-table-column>
            <el-table-column show-overflow-tooltip label='交易渠道' prop='SOURCE_TYPE'></el-table-column>
            <el-table-column show-overflow-tooltip label='交易信息' prop='TRAN_DESC'></el-table-column>
            <el-table-column show-overflow-tooltip label='摘要信息' prop='NARRATIVE'></el-table-column>
        </el-table>
        <div style="text-align: center">
            <el-pagination background @size-change="handleSizeChange" @current-change="changePage"
                           :page-sizes="[20, 40, 60, 80]" :page-size="pagination.pageSize" :current-page.sync='pagination.currentPage'
                           layout='prev, sizes, pager, next, total, jumper' :total='pagination.total' :pageSize='10'>
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import commonApi from '@/api/common.js'
    import { Notification } from 'element-ui'
    // 客服中心座席不满意得分报表
    export default {
        data () {
            return {
                tableData: [],
                pagination: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 20
                }
            }
        },
        created () {
        },
        watch: {

        },
        mounted () {
            this.getTableData()
        },
        methods: {
            handleNodeClick () { },
            // 切换页码
            changePage (val) {
                this.pagination.currentPage = val
                this.getTableData()
            },
            // 可以调整每页条数
            handleSizeChange (val) {
                this.pagination.pageSize = val
                this.getTableData()
            },
            // 获取数据表
            getTableData () {
                // 参数有待确认
                commonApi.getOnlineDissatisfied(this.pagination).then(response => {
                    if (response.retcode === '0') {
                        this.tableData = response.data.info
                        this.pagination.total = response.data.total
                    } else {
                        Notification.error('数据返回失败')
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .left {
        float: left;
        width: 20%;
        border: 1px solid #1f92ef;
    }

    .right {
        float: left;
        width: 79%;
        border: 1px solid #1f92ef;
    }
</style>
